<template>
  <div class="features">
    <div class="feature-card">
      <div class="feature-header">
        <i class="material-icons">menu_book</i>
        <h3>课程管理</h3>
      </div>
      <p>创建、编辑和组织您的课程内容，打造个性化教学体系</p>
    </div>
    <div class="feature-card">
      <div class="feature-header">
        <i class="material-icons">lightbulb</i>
        <h3>知识点</h3>
      </div>
      <p>系统化整理知识点，构建知识网络，便于学生理解和掌握</p>
    </div>
    <div class="feature-card">
      <div class="feature-header">
        <i class="material-icons">smart_toy</i>
        <h3>AI智能生成</h3>
      </div>
      <p>利用AI技术快速生成练习题，减轻教师工作负担</p>
    </div>
  </div>
</template>

<style scoped>
.features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 2rem;
  background-color: #1a1a1a; /* 添加深色背景 */
}

.feature-card {
  background: #333;
  border-radius: 8px;
  padding: 2rem;
  width: 30%;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
  background: #3a3a3a;
}

.feature-header i {
  transition: all 0.3s ease;
}

.feature-card:hover .feature-header i {
  transform: scale(1.1);
  color: #a78bfa;
}

.feature-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem; /* 从0.5rem减小到0.3rem */
}

.feature-card p {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ccc;
  line-height: 1.4; /* 添加行高控制 */
  margin-top: 0.5rem; /* 添加顶部间距 */
}

.feature-header i {
  font-size: 24px;
  color: #8b5cf6;
}

.feature-header h3 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 24px;  /* 从22px增大到24px */
  color: white;
}
</style>